<template>
  <div>
    <div class="pages-wrap">
      <!-- 当前的分类页面 -->
      <scroll-view class="content" ref="scroll">
        <template>
          <div class="page">
            <!-- 轮播图 -->
            <banner />
            <!-- 点击跳转项目 -->
            <operate />
            <!-- 热门地点导航 -->
            <popular v-model="activeIndex" />
            <!-- 房东故事 -->
            <host-stories></host-stories>

            <!-- <p>home</p> -->

          </div>
        </template>
      </scroll-view>

    </div>
    <!-- 下一级页面 -->
    <!-- 设置router-link后不用设置router-view -->
    <transition enter-active-class="slideIn" leave-active-class="slideOut"> 
      <router-view ></router-view>
 </transition>
  </div>
</template>

<script>
import Banner from './com/Banner.vue'
import Operate from './Operate/Index.vue'
import Popular from './com/Popular.vue'
import HostStories from './com/HostStories.vue'

export default {
  name: "home-page",
  data() {
    return {
      activeIndex: 0
    }
  },
  components: {
    [Banner.name]: Banner,
    [Operate.name]: Operate,
    [Popular.name]: Popular,
    [HostStories.name]: HostStories,
},
  methods:{
    test(){
      this.$router.push("/home/payment")
    },

    

  }





}
</script>

<style lang="scss" scoped>
.content {
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 50px;
  overflow: hidden;

  .page {
    width: 100%;
    position: relative;

    top: 0;
    left: 0;
    bottom: 50px;

    // .lit {
    //   position: absolute;
    //   left: 0;
    //   right: 0;
    //   top: 0;
    //   bottom: 0;
    //   z-index: 10;
    //   background-color: #fff;
    // }
  }
}
</style>